<template>
    <div class="root" @scroll='roomScroll'>
        <!--加载中-->
        <p v-if="dataState == 'loading'" style="text-align: center;">
            <span class='fa fa-refresh fa-spin fa-3x'></span>
        </p>
        <!--网络连接超时-->
        <p v-if="dataState == 'fail'">
            网络出问题了
        </p>
        <CateRoomItem v-for="(item,i) in roomMsg" :roomMsg='item' :key='i'></CateRoomItem>
        <p v-if="roomMsg.length>0">
            <span class='fa fa-spinner fa-spin fa-3x'></span>
        </p>
    </div>
</template>
<script>
    import CateRoomItem from './CateRoomItem'
    export default{
        props:['roomMsg','dataState'],
        components:{
            CateRoomItem,
        },
        methods:{
            roomScroll(e){
                if(e.target.scrollTop>=e.target.scrollHeight-e.target.clientHeight-100){
                    this.$emit('requestMore')
                }
            }
        }
    }
</script>
<style scoped>
    .root{
        height: calc(100vh - 50px);
        overflow: scroll;
    }
    p{
        text-align: center;
    }
</style>